<template>
  <div class="demo2-container">
    <p>通过:ref将dom引用放到数组中</p>
    <a-space>
      <div class="list-section">
        <div
          :ref="setRefAction"
          @click="higherAction(index)"
          class="list-item"
          v-for="(item, index) in state.list"
          :key="index"
        >
          <span>{{ item }}</span>
        </div>
      </div>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const state = reactive({
  list: [1, 2, 3, 4, 5, 6, 7],
  refList: [] as Array<any>,
})

const higherAction = (index: number) => {
  let height = state.refList[index].style.height
    ? state.refList[index].style.height
    : '20px'
  height = Number(height.replace('px', ''))
  state.refList[index].style = `height: ${height + 20}px`
  console.log(state.refList[index])
}

const setRefAction = (el: any) => {
  console.log(el)
  state.refList.push(el)
}
</script>

<style lang="scss" scoped>
.demo2-container {
  width: 100%;
  height: 100%;

  .list-section {
    width: 200px;
    .list-item {
      width: 200px;
      height: 20px;
      background-color: pink;
      color: #333;
      transition: all 0.5s ease-in-out;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
